<template>
  <div class="shop-cart-item">
    <img :height="imgHeight ? imgHeight : 50" :src="baseUrl + data.product.img" alt>
    <div :style="{fontSize: fontSize + 'px',width: pdescw + 'px'}">{{data.product.pdesc}}</div>
    <div
      :style="{fontSize: fontSize + 'px'}"
      style="color: red; width: 100px"
    >￥{{data.product.price}}</div>
    <div class="num">
      <el-input-number
        @change="numChange(data)"
        size="mini"
        :min="1"
        :max="data.product.stock"
        v-model="data.num"
        controls-position="right"
      ></el-input-number>
    </div>
    <el-button
      @click="deleteProduct(data.id)"
      size="mini"
      type="danger"
      icon="el-icon-delete"
      circle
    ></el-button>
  </div>
</template>

<script>
export default {
  name: "shopCartItem",
  props: ["data", "imgHeight", "fontSize", "pdescw"],
  data() {
    return {
      timeOutId: null
    };
  },
  methods: {
    putMethod() {},
    numChange(data) {
      let that = this;
      // 当timeOutId不为空时清除上一次的timeOutId
      if (this.timeOutId != null) {
        clearTimeout(this.timeOutId);
      }
      // 设置定时器，0.5秒没发生change事件执行更新操作
      this.timeOutId = setTimeout(() => {
        that.$myPut(that, "/shopCart/front/update", that.putMethod, data);
      }, 500);
    },
    deleteProduct(id) {
      this.$myDelete(this, "shopCart/front/delete?id=" + id, this.getShopCarts);
    },
    getShopCarts() {
      this.axios.get("/shopCart/front/getAll").then(res => {
        this.$root.$data.cart = res.data.data;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.shop-cart-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  justify-content: space-evenly;
  padding: 10px 0;
  > * {
    margin-right: 20px;
    text-align: center;
  }
  > .num > .el-input-number--mini {
    width: 95px;
  }
}
div {
  font-size: 12px;
}
</style>